<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :visible="visible"
    :width="375"
    @close="closeModal"
    :body-style="{
      height: 'calc(100% - 55px)',
      padding: 0,
      background: '#f5f4f7',
    }"
  >
    <div v-if="orderIframe" style="padding: 10px; padding-bottom: 0">
      <a-alert
        message="提示"
        description="请使用手机打开处理工单"
        type="warning"
      />
    </div>
    <iframe
      :src="url"
      class="iframe"
      frameborder="no"
      border="0"
      marginWidth="0"
      marginHeight="0"
    ></iframe>
  </a-drawer>
</template>

<script>
import { defineComponent, onMounted, ref, watch } from "vue";

export default defineComponent({
  name: "NoticeIframe",
  props: {
    title: {
      type: String,
      default: "查看详情",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const closeModal = () => {
      emit("cancel");
    };

    const orderIframe = ref(false);
    onMounted(() => {
      if (props.url.indexOf("orderRepair") !== -1) {
        orderIframe.value = true;
      } else {
        orderIframe.value = false;
      }
    });

    return {
      closeModal,
      orderIframe,
    };
  },
});
</script>

<style scoped>
.iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
